<template>
  <div class="navbar">
    <div class="menu-icon" @click="Menu">
      <div class="bar" :class="{ 'open': isOpen }"></div>
      <div class="bar" :class="{ 'open': isOpen }"></div>
      <div class="bar" :class="{ 'open': isOpen }"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isOpen = ref(false); // 控制菜单的开关

    const Menu = () => {
      isOpen.value = !isOpen.value; // 切换菜单的显示状态
    };

    return {
      isOpen,
      Menu,
    };
  },
});
</script>

<style scoped lang="scss">
.navbar {
  position: relative;
}

.menu-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
}

.menu-icon div:nth-child(2) {
  width: 15px;
  align-items: center;
}

.bar {
  height: 3px;
  width: 100%;
  background-color: black;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.bar.open {
  &:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* 第一个条形旋转 */
  }
  &:nth-child(2) {
    opacity: 0; /* 中间条形消失 */
  }
  &:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -9px); /* 最后一个条形旋转 */
  }
}


.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease; /* 渐变效果 */
}

.fade-enter, .fade-leave-to {
  opacity: 0; /* 离开时透明度变为0 */
}
</style>
